<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NoticeDetail - Group4 UniHub</title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/components.css">
    <link rel="stylesheet" href="../styles/noticeboard.css">
</head>
<body>
    <div id="header">
        <app-header page-title="Campus Noticeboard"></app-header>
    </div>
    
    <div class="main-container">
        <div id="sidebar"></div>
        
        <div class="content">
            <div class="notice-detail" id="noticeDetail">
                <!-- Details will be dynamically generated -->
            </div>

            <div class="comments-section">
                <h3>Comments</h3>
                <div class="comment-form">
                    <textarea class="comment-input" placeholder="Write your comment..."></textarea>
                    <button class="search-btn">Post Comment</button>
                </div>
                <div class="comments-list" id="commentsList">
                    <!-- Comments will be dynamically generated -->
                </div>
            </div>
        </div>
    </div>

    <div id="footer"></div>

    <script src="../components/header.js"></script>
    <script type="module" src="../components/sidebar.js"></script>
    <script src="../components/footer.js"></script>
    <script type="module" src="../scripts/notice-detail.js"></script>
</body>
</html> 